<template>
  <view>
	  <!-- 为空时显示 -->
	  <view v-show="isEmpty">
		  <empty></empty>
		  <displayList></displayList>
	  </view>
	  <!-- 有内容 -->
	  <view class="cart" v-show="!isEmpty">
	    <view class="order-container" v-for="order in list" :key="order.oid">
	      <view class="order-header">
	        订单号：{{ order.oid }} | 状态：{{ order.ordersStatus }} 
	      </view>
	      <view class="item-list">
	        <view class="item" v-for="item in order.items" :key="item.id">
	          <view class="left">
	            <view class="text-above-img">{{ item.ordersUser }}<u-icon name="arrow-right"></u-icon></view>
	            <image :src="item.cartImgUrl" class="img"></image>
	          </view>
	          <view class="center">
	            <view class="name">{{ item.ordersProductName }}</view>
	            <view class="size">{{ item.ordersProductColor }}, {{ item.ordersProductGender }}</view>
	            <view class="count">数量 x {{ item.ordersProdNumber }}</view>
	          </view>
	  		  <!-- 右侧内容 -->
	          <view class="right">
	  			<view class="price" style="color: green;">
	  			  {{ item.ordersStatus }}
	  			</view>
	            <view class="update-count">
	  			  <button class="mini-btn" type="default"  style="color: green;" @tap="gotoComment(list.oid)">
	  			    评价
	  			  </button>
	            </view>
				<view class="price" style="color: red;margin-top: 10rpx;">
				  ￥{{item.ordersCurrentPrice}}元
				</view>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
  </view>
</template>

<script>
	import {
		store
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import {
		get,
		post,
		setToken
	} from '@/utils/api.js';
	import empty from '../empty.vue';
	import displayList from '../displayList.vue';
export default {
  data() {
    return {
		isEmpty:false,
      list: []
    };
  },
  components:{
  	empty,
  	displayList
  },
  created() {
  	this.getMyWaitCommentOrder()
  },
  methods: {
	  getMyWaitCommentOrder() {
	  		post('/order/getOrderByUserNameAndStatus',
	  		{
			ordersUser:store.userInfo.username,
			 ordersStatus: "待评价"  
	  		}, {
	  		  needToken: true, 
	  			success: (res) => {
	  			if (res.statusCode === 200) {
				if(res.data.data.length)
				{
				this.list = this.transformOrdersData(res.data.data)	
				}
				else{
					this.isEmpty = !this.isEmpty
				}
	  			}
	  		  }
	  		});   
	  },
    gotoComment() {
		 uni.navigateTo({
		 	url:'/pages/Comment/Comment'
		 })
    },
	transformOrdersData(orders) {
	  const transformedList = [];
	
	  orders.forEach(order => {
	    // 查找是否已有对应的oid对象存在
	    let existingOrder = transformedList.find(o => o.oid === order.oid);
	
	    if (!existingOrder) {
	      // 如果不存在，则创建一个新的对象
	      existingOrder = {
	        oid: order.oid,
	        timestamp: Math.floor(new Date(order.ordersCreatedate).getTime() / 1000),
	        items: [],
	        ordersStatus: order.ordersStatus || ''
	      };
	      transformedList.push(existingOrder);
	    }
	
	    // 添加或更新订单项
	    existingOrder.items.push({
	      addressId: order.addressId,
	      ordersProductName: order.ordersProductName,
	      ordersCurrentPrice: order.ordersCurrentPrice,
	      ordersProdNumber: order.ordersProdNumber,
	      ordersNote: order.ordersNote,
	      cartImgUrl: order.cartImgUrl,
	      ordersUser: order.ordersUser,
	      ordersStatus: order.ordersStatus || '',
				 ordersProductAge: order.ordersProductAge,
				 ordersProductGender: order.ordersProductGender,
				 ordersProductPosttime: order.ordersProductPosttime,
				 ordersProductColor: order.ordersProductColor
	    });
	  });
	console.log(transformedList)
	  return transformedList;
	}
  }
};
</script>

<style lang="scss" scoped>
.cart {
  width: 750rpx;
  margin: -11rpx auto 20rpx;
  background: #f1e8e7;

  .order-container {
    width: 750rpx;
    background: #f9f9f9;
    box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
    border-radius: 24rpx;
    margin-top: 32rpx;
    padding: 16rpx;

    .order-header {
      font-size: 20rpx;
      font-weight: bold;
      color: #3E3E3E;
      margin-bottom: 16rpx;
    }

    .item-list {
      display: flex;
      flex-direction: column;
      gap: 16rpx;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {


          .text-above-img {
            width: 100%;
          }

          .img {
            width: 178rpx;
            height: 136rpx;
            margin-bottom: 10rpx;
            border-radius: 8%;
          }
        }

        .center {
          width: 170rpx;

          .name {
            font-size: 26rpx;
            color: #3E3E3E;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .size,
          .count {
            font-size: 22rpx;
            color: #8D8D8D;
          }
        }

        .right {
          .price {
            margin-top: 0;
            font-size: 26rpx;
            margin-left: 10rpx;
			text-align: center;
          }

          .update-count {
            margin-top: 0;
            display: flex;

            .mini-btn {
              width: 120rpx;
              height: 50rpx;
              background: #F1ECE7;
              border-radius: 21.6rpx;
              color: red;
              font-size: 16rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
</style>